<template>
  <div id="login">
    <section class="content" v-show="showLogin">
      <div class="manage">
        <p>shop后台管理系统</p>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登陆</el-button>
        </el-form-item>
      </el-form>
      <p class="tip">温馨提示：</p>
      <p class="tip">未登录过的新用户，自动注册</p>
      <p class="tip">注册过的用户可凭账号密码登录</p>
    </section>
  </div>
</template>
<script>
  import api from '@/api/center'
  import store from '@/store'

  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
        },
        showLogin: false,
      }
    },
    mounted() {
      this.showLogin = true;
      if (!this.adminInfo) {
        try {
          api.queryAdminInfo().then(res => {
            if (res.status === 1) {
              store.commit('saveAdminInfo', res.data);
            } else {
              console.log('您尚未登陆或者session失效')
            }
          });
        } catch (err) {
          console.log('您尚未登陆或者session失效')
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              user_name: this.loginForm.username,
              password: this.loginForm.password
            };
            api.adminLogin(params).then(res => {
              if (res.status === 1) {
                this.$message({
                  type: 'success',
                  message: '登录成功'
                });
                this.$router.push('HomeIndex')
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                });
              }
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '请输入正确的用户名密码',
              offset: 100
            });
            return false;
          }
        });
      },
    },
    watch: {
      adminInfo: function (newValue) {
        if (newValue.id) {
          this.$message({
            type: 'success',
            message: '检测到您之前登录过，将自动登录'
          });
          this.$router.push('manage')
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .content {
    position absolute
    top 50%
    left 50%
    width 320px
    height 230px
    transform translate(-50%, -50%)
    padding 25px
    border-radius 5px
    text-align center
    background-color #fff
    .submit_btn {
      width 100%
      font-size 16px
    }
  }

  .manage {
    position absolute
    width 100%
    top -100px
    left 0
    p {
      font-size 34px
      color #fff
    }
  }

  .tip {
    font-size 12px
    color red
  }
</style>
